<template>
  <div class="index-page">
    <pageHead title='匹配状态'></pageHead>
    <nav>
      <ul class="flex">
        <li
          v-for="(item, index) in tabs"
          :class="{on:cur==index}"
          :key="index"
          @click="tabClick(index)"
        ><i></i>{{item.text}}</li>
      </ul>
    </nav>
    <div class="tab">
      <ul class="flex">
        <li
          v-for="(item, index) in navs"
          :class="{on:curTab==index}"
          :key="index"
          @click="navClick(index)"
        ><i></i></li>
      </ul>
    </div>
    <div class="item" v-if="curTab == 0">
      <ul>
        <li>
          <div class="view">
            <div class="number">编号：FXB144165039</div>
            <div class="info">
              <div class="center clearfix">
                <p class="time fl">订单时间：2018.04.27 17:09</p>
                <p class="money fr">金额：<span>￥3000</span></p>
              </div>
              <div class="spare clearfix">
                <div class="num fl">剩余时间：190小时</div>
                <div class="btn fr" @click="details()">详情</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="item" v-if="curTab == 1">
      <ul>
        <li>
          <div class="view">
            <div class="number">编号：FXB144165039</div>
            <div class="info">
              <div class="center clearfix">
                <p class="time fl">订单时间：2018.04.27 17:09</p>
                <p class="money fr">金额：<span>￥3000</span></p>
              </div>
              <div class="spare clearfix">
                <div class="btn fr" @click="details()">详情</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="item" v-if="curTab == 2">
        <div class="null flex flexAtcent flexJcent"><img src="../include/img/null_ico1.png" alt=""></div>
    </div>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {
      tabs: [
        {
          text: '提供订单'
        },
        {
          text: '接受订单'
        }
      ],
      navs: [{}, {}, {}],
      cur: 0,
      curTab: 0
    }
  },
  activated: function () {},
  mounted: function () {},
  methods: {
    tabClick: function (e) {
      this.cur = e
      this.curTab = 0
    },
    navClick: function (e) {
      this.curTab = e
    },
    details: function (e) {
      this.$router.push({
        path: 'state/details'
      })
    }
  },
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  nav {
    ul {
      height: auto;
      li {
        flex: 1;
        text-align: center;
        font-size: 0.32rem;
        color: #313131;
        line-height: 1.2rem;
        height: 1.2rem;
        position: relative;
        i {
          width: 1.24rem;
          height: 0.05rem;
          position: absolute;
          top: 0.9rem;
          left: 50%;
          margin-left: -0.62rem;
        }
        &.on {
          i {
            background: #0192dd;
          }
        }
      }
    }
  }
  .tab {
    padding-top: 0.3rem;
    padding-bottom: 0.17rem;
    background: #fff;
    ul {
      height: auto;
      li {
        flex: 1;
        height: 1.93rem;
        background-repeat: no-repeat;
        background-position: top center;
        &:nth-child(1) {
          background-image: url("../include/img/tab_ico1.png");
          background-size: 2.1rem 1.8rem;
          &.on {
            background-image: url("../include/img/tab_ico4.png");
            background-size: 2.1rem 1.93rem;
          }
        }
        &:nth-child(2) {
          background-image: url("../include/img/tab_ico2.png");
          background-size: 2.1rem 1.8rem;
          &.on {
            background-image: url("../include/img/tab_ico5.png");
            background-size: 2.1rem 1.93rem;
          }
        }
        &:nth-child(3) {
          background-image: url("../include/img/tab_ico3.png");
          background-size: 2.1rem 1.8rem;
          &.on {
            background-image: url("../include/img/tab_ico6.png");
            background-size: 2.1rem 1.93rem;
          }
        }
      }
    }
  }
  .item {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 4.6rem;
    ul {
      li {
        padding-bottom: 0.28rem;
        margin-top: 0.1rem;
        background: #fff;
        .view {
          width: 6.9rem;
          margin-left: auto;
          margin-right: auto;
          .number {
            height: 0.8rem;
            display: flex;
            align-items: center;
            font-size: 0.22rem;
            color: #a0a0a0;
            border-bottom: dashed 0.02rem #eeeeee;
          }
          .info {
            .center {
              font-size: 0.24rem;
              color: #313131;
              margin-top: 0.25rem;
              p {
                &.money {
                  span {
                    font-size: 0.3rem;
                    color: #29b15f;
                  }
                }
              }
            }
            .spare {
              font-size: 0.24rem;
              margin-top: 0.2rem;
              .num {
                color: #ff0000;
              }
              .btn {
                color: #313131;
                padding-right: 0.23rem;
                height: 0.37rem;
                line-height: 0.37rem;
                background: url("../include/img/right_ico.png") no-repeat right
                  center;
                background-size: 0.13rem 0.23rem;
              }
            }
          }
        }
      }
    }
    .null {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        height: auto;
        img {
            width: 1.8rem;
        }
    }
  }
}
</style>
